import React, {useEffect, useState} from 'react';
import { Form, Input, InputNumber} from 'antd';

import ProBox from "vendor/components/pro-box";
import {WrappedComponentProps} from "vendor/components/pro-hoc/withModal";

import { RespDataType, createOrganization, updateOrgData, getOrgDetail } from '../../../api';

interface DataAuthProps extends WrappedComponentProps{
    deptId?: number;
    optType: "add" | "edit";
    fetchList: () => void;
    editData?: RespDataType.DeptItemInfo,
}

const CreateOrEdit: React.FC<DataAuthProps> = ({ modalControl,optType, deptId, fetchList, editData }) => {
    const [ form ] = Form.useForm();
    const [ loading, setLoading ] = useState(true);
    const [ deptInfo, setDeptInfo ] = useState<RespDataType.DeptItemInfo>();

    const isEditMode = optType == "edit";

    useEffect(() => {
        modalControl.registerOk(handleSubmit);
    });

    useEffect(() => {
        if(isEditMode){
            setLoading(true);
            getOrgDetail(deptId.toString()).then((resp) => {
                setDeptInfo(resp.data);
                setLoading(false);
            })
        }else{
            setLoading(false);
        }
    }, [])

    const handleSubmit = () => {
        form.validateFields().then((values) => {
            const success = () => {
                fetchList();
                modalControl.close()
            }
            const error = () => modalControl.hideSaving();

            if(isEditMode){
                values.deptId = deptId;
                values.parentId = editData.parentId;
                updateOrgData(values).then(success).catch(error)
            }else{
                values.parentId = deptId ? deptId : 0;
                createOrganization(values).then(success).catch(error)
            }
        }).catch(() => modalControl.hideSaving())
    }

    return <ProBox loading={loading}>
        <Form
            form={form}
            initialValues={{
                orderNum: 0,
                ...(editData || {}),
                ...(deptInfo ? {geo: deptInfo.geo} : {}),
            }}
            labelCol={{span: 4}}
            wrapperCol={{span: 18}}
        >
            <Form.Item
                label="组织名称"
                name="deptName"
                rules={[{required: true, message: '组织名称不能为空'}]}
            >
                <Input placeholder="请输入组织名称"/>
            </Form.Item>

            <Form.Item
                label="经度"
                name="lng"
            >
                <Input placeholder="请输入经度"/>
            </Form.Item>

            <Form.Item
                label="纬度"
                name="lat"
            >
                <Input placeholder="请输入纬度"/>
            </Form.Item>

            <Form.Item
                label="序号"
                name="orderNum"
            >
                <InputNumber placeholder="请输入序号" min={0}/>
            </Form.Item>

            <Form.Item
                label="geoJSON数据"
                name="geo"
            >
                <Input.TextArea
                    placeholder="请输入geoJSON数据"
                    autoSize={{minRows: 10,maxRows: 10}}
                />
            </Form.Item>

        </Form>
    </ProBox>
}

export default CreateOrEdit;

